<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>延后提醒</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <style>
        body { background: #f5f5f5; }
        .container { max-width: 600px; padding: 15px; }
        .reminder-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .action-buttons { margin: 20px 0; }
        .action-buttons .btn { margin-bottom: 10px; width: 100%; }
        .quick-options .btn { margin-bottom: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="reminder-card">
            <h4>{$reminder.title}</h4>
            {if $reminder.description}
                <p class="text-muted">{$reminder.description}</p>
            {/if}
            <p class="text-info">当前提醒时间：{$reminder.due_date}</p>
            {if $reminder.notes}
                <p class="text-secondary">备注：{$reminder.notes}</p>
            {/if}
        </div>

        <div class="quick-options">
            <h5>快速延后</h5>
            <div class="d-grid gap-2">
                <button class="btn btn-outline-primary" onclick="postponeReminder('+30minutes')">延后30分钟</button>
                <button class="btn btn-outline-primary" onclick="postponeReminder('+1hour')">延后1小时</button>
                <button class="btn btn-outline-primary" onclick="postponeReminder('+1day')">延后1天</button>
                <button class="btn btn-outline-primary" onclick="postponeReminder('+1week')">延后1周</button>
            </div>
        </div>

        <div class="mt-4">
            <h5>自定义时间</h5>
            <form id="customPostponeForm" class="mb-3">
                <div class="mb-3">
                    <label class="form-label">选择新的提醒时间</label>
                    <input type="datetime-local" class="form-control" name="postpone_time" required>
                </div>
                <button type="submit" class="btn btn-primary w-100">确认延后</button>
            </form>
        </div>

        <div class="action-buttons">
            <a href="/reminder/note_page?reminder_id={$reminder.id}&key={$operation_key}" class="btn btn-secondary">返回详情页</a>
        </div>
    </div>

    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script>
        // 快速延后
        function postponeReminder(time) {
            fetch('/reminder/postpone?reminder_id={$reminder.id}&key={$operation_key}&postpone_time=' + time, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    alert('提醒已延后');
                    window.close();
                } else {
                    alert(data.message || '操作失败');
                }
            });
        }

        // 自定义时间延后
        document.getElementById('customPostponeForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const customTime = formData.get('postpone_time');
            
            fetch('/reminder/postpone?reminder_id={$reminder.id}&key={$operation_key}&postpone_time=' + customTime, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    alert('提醒已延后');
                    window.close();
                } else {
                    alert(data.message || '操作失败');
                }
            });
        });
    </script>
</body>
</html> 